<template>
    <div class="header">
        <el-row>
            <el-col
                :sm="8"
                v-for="(section, index) of sections"
                class="card"
                :key="index">
                <el-card class="el-card" v-loading='loading'>
                    <div class="item-content" @click='seeNews(section)'>
                        <img :src="!section?'':section.imgUrl"></img>
                        <h3>{{!section?'':section.title}}</h3>
                        <!-- <div v-html="!section?'':section.content"></div> -->
                    </div> 
                    <!-- <div class="item-cover">
                    </div>
                    <div class="cover-content">
                        <div class="cover-see" @click='seeNews(section)'>查看要闻</div>
                    </div> -->
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import { getListNews } from 'api/bulletinBoard';
    export default {
        data() {
            return {
                loading: true,
                sections: []
            };
        },
        computed: {
            
        },
        created() {
            this.getListNewsFu();
        },
        methods: {
            // 要闻列表展示
            getListNewsFu() {
                getListNews().then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.sections = response.data.content;

                        let listArray = [];
                        !this.sections?'':this.sections.forEach(function(element) {
                            if (element.position == '1') {
                                listArray[0] = element;
                            } else if (element.position == '2') {
                                listArray[1] = element;
                            } else if (element.position == '3') {
                                listArray[2] = element;
                            }
                        }, this);
                        this.sections = listArray;
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },

            // 查看要闻
            seeNews(section) {
                let articleId = !section?'':section.articleId;
                this.$router.push({ path: `/home/newsDetail/0/${articleId}`});
            }

        }
    };

    
</script>

<style rel="stylesheet/scss" lang="scss">

    ul{
        list-style: none;
    }
    .header{
        .card{
            height: 406px;
            padding: 7px;
            transition: all .5s;
            overflow: hidden;
            .el-card{
                position: relative;
                overflow: hidden;
                .item-content{
                    cursor: pointer;
                    img{
                        width: 100%;
                        height: 300px;
                    }
                    h3{
                        font-size: 15px;
                        color: #333;
                        font-weight: normal;
                        word-wrap: break-word;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        // padding-bottom: 6px;
                        height: 26px;
                        margin-top: 20px;
                    }
                    div{
                        height: 30px;
                        font-size: 12px;
                        color: #333;
                        word-wrap: break-word;
                        overflow:hidden; 
                        text-overflow:ellipsis;
                        display:-webkit-box; 
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:2; 
                    }
                }
                .cover-content{
                    display:none;
                }
                &:hover{
                    .item-cover{
                        height: 100%;
                        width: 100%;
                        background: #000;
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                    .cover-content{
                        display: block;
                        position: absolute;
                        top: 8px;
                        right: 8px;
                        overflow: hidden;
                        .cover-replace {
                            width: 48px;
                            height: 32px;
                            background-color: #ff5e2c;
                            border-radius: 4px;
                            border: solid 1px #e75022;
                        }
                    }
                    // .cover-content{
                    //     cursor: pointer;
                    //     display: block;
                    //     position: absolute;
                    //     top: 0;
                    //     left: 50%;
                    //     top: 30%;
                    //     margin-left: -90px;
                    //     overflow: hidden;
                    //     color: #fff;
                    //     .cover-see{
                    //         font-size: 20px;
                    //         font-weight: bold;
                    //         margin: 0 auto;
                    //         text-align: center;
                    //         border: 4px solid #fff;
                    //         width: 180px;
                    //         height: 180px;
                    //         line-height: 180px;
                    //         border-radius: 90px;
                    //         margin-bottom:15px;
                    //     }
                    // }
                }
                
            }
            
        }
    }
</style>

